<template>
  <el-tabs v-if="tabs && tabs.list.length>0"
           class="xdh-nav-tabs"
           type="card"
           :active-name="tabs.selected"
           @tab-remove="handleTabRemove"
           @tab-click="handleTabClick">
    <el-tab-pane v-for="(item,index) in tabs.list" :key="item.name"
                 :label="item.label"
                 :closable="item.closable"
                 :name="item.name">
      <template slot="label" v-if="$scopedSlots.label">
        <slot name="label" :item="item" :index="index">{{item.label}}</slot>
      </template>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
  /**
   * nav-tabs 导航标签页组件
   * @module widgets/xdh-nav-tabs
   * @description 组件create后会自行创建一个命名store（默认名'xdhNavTab'）管理自身的数据。store.state的解构如下：
   * @property {Array} [list] 生成多个选项卡的数据列表
   * @property {String} [list.label] 选项卡显示名
   * @property {String} [list.name] 选项卡对应的路由路径
   * @property {Boolean} [list.closable] 选项卡是否可关闭
   * @property {String} [selected] 当前被选中的选项卡name
   * @example
   *
   * // 在 router.js 中动态注册 navs-tabs的 store
   * import store from '../store/index'
   * import createStoreModule from '@/widgets/xdh-nav-tabs/store' // 引入nav-tabs的store实例创建函数
   * const DEMO_TABS = 'demoTabs'
   * if (!store.state[DEMO_TABS]) { // 若导航选项卡的store未生成
   *   store.registerModule(DEMO_TABS, createStoreModule())
   * }
   * // 通过路由守卫向demoTabs.state添加tabs的列表数据
   * router.afterEach((to) => { store.commit(`${DEMO_TABS}/push`, toObj })
   *
   * scopeSlots
   * @member scopeSlots
   * @property {string} label 自定义选项卡标题内容, 参数：item 当前选项卡数据，index 数据所在数组索引
   *
   */
  import createStoreModule from './store'

  export default {
    name: 'XdhNavTabs',
    /**
     * 属性参数
     * @property {String} [label] 显示文字（可选），如果有值时，会作为当前默认选中标签页
     * @property {String} [name] 选项卡名称，通常设为路由的 path（可选），如果有值时，会作为当前默认选中标签页
     * @property {Boolean} [closable = true] 是否能关闭
     * @property {String} [store = xdhNavTab] 默认模块名
     */
    props: {
      label: {
        type: String
      },
      name: {
        type: String
      },
      closable: {
        type: Boolean,
        default: true
      },
      store: {
        type: String,
        default: 'xdhNavTab'
      }
    },
    computed: {
      tabs() {
        const store = this.$store.state[this.store]
        if (store) {
          return store
        } else {
          return {
            list: [],
            selected: ''
          }
        }
      }
    },
    methods: {
      handleTabRemove(name) {
        this.$store.commit(`${this.store}/remove`, {name: name})
        this.$nextTick(() => {
          this.$router.push(this.tabs.selected)
        })
      },
      handleTabClick(tab) {
        // 由于el-tabs组件有自己的逻辑要处理
        this.$nextTick(() => {
          this.$router.push(tab.name)
        })
      }
    },
    created() {
      /**
       * 创建时若 store中没有  ‘xdhNavTab’ 这个模块， 自行创建‘xdhNavTab’模块
       */
      if (!this.$store.state[this.store]) {
        this.$store.registerModule(this.store, createStoreModule())
      }
      if (this.label && this.name) {
        this.$store.commit(`${this.store}/push`, {
          tab: {
            label: this.label,
            name: this.name,
            closable: this.closable
          }
        })
      }
    }
  }
</script>
